@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply antialiased text-gray-900;
  }

  a {
    @apply transition;
  }

  pre {
    @apply bg-gray-800 text-gray-50 p-6 rounded-lg text-sm;
  }
}

@layer components {
  button {
    @apply flex
    items-center
    px-4
    py-2
    font-semibold
    rounded
    bg-emerald-500
    text-white
    hover:bg-emerald-600
    focus:outline-none
    focus:ring-2
    focus:ring-primary-200
    focus:ring-offset-2;
  }

  [type="text"],
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  textarea,
  select {
    @apply rounded
    shadow-sm
    border-gray-300
    focus:ring
    focus:ring-primary-200
    focus:ring-opacity-50
    focus:border-primary-300;
  }

  [type="checkbox"],
  [type="radio"] {
    @apply w-5
    h-5
    text-primary-500
    border-gray-300
    focus:ring
    focus:ring-offset-0
    focus:ring-primary-200
    focus:ring-opacity-50
    focus:border-primary-300;
  }

  [type="checkbox"] {
    @apply rounded
    shadow-sm;
  }
}
